<template>

    <div class="head">
        <el-row :gutter="20" style="margin-left: 0px;margin-right: 0px;">
            <el-col :span="4">
                <el-switch
                        v-model="showFileBar"
                        class="mb-2"
                        active-text="打开目录"
                        inactive-text="关闭目录"
                        @click="changeDrawing"
                />
                <el-button style="margin-left: 10px;" type="success" circle size="small" @click="refreshFileTree">
                    <el-icon><RefreshRight /></el-icon>
                </el-button>
            </el-col>

            <el-col :span="20">
                <el-button type="primary" @click="loadDefaultFlowImgClick">加载默认流程图</el-button>
                <el-button type="primary" @click="getFlowJsonDataClick">打印图表数据</el-button>
                <el-button type="primary" @click="toPNGClick">导出流程图PNG</el-button>
                <el-button type="primary" @click="toSVGClick">导出流程图SVG</el-button>
                <el-button type="success" @click="saveFlowData">保存至 {{filePathName}} </el-button>
            </el-col>
        </el-row>
    </div>
    <el-row :gutter="20" style="margin-left: 0px;margin-right: 0px;">
        <el-col :span="4" v-show="showFileBar">
            <!--文件树-->
            <FileTreeBar/>
        </el-col>
        <el-col :span="drawingSpan">
            <div class="grid-content ep-bg-purple"/>
            <div id="zxwcontainer">
                <div id="stencil"></div>
                <div id="graph-container"></div>
            </div>
        </el-col>
    </el-row>

    <div style="text-align: center">
        <el-link href="https://beian.miit.gov.cn" type="primary" target="_blank">浙ICP备2022025016号</el-link>
    </div>
</template>

<script setup lang="ts">
    import FileTreeBar from "@/components/drawing/FileTreeBar.vue"
    import {ElMessageBox} from "element-plus";
    import insertCss from "insert-css";
    import emitter from "@/utils/event-bus"

    import {
        drawGraph,
        getFlowJsonData,
        toPNG,
        toSVG,
        graphShadow,
    } from "@/common/service/flow-drawing-board";
    import {insertFlowJsonData,findFlowJsonDataByFilePathId} from "@/api/flow-json-data"
    import defaultFlowImgDataJSON from "@/common/json/default-flow-img-data.json";
    import emptyFlowJson from "@/common/json/empty-flow.json";
    import {getCurrentInstance, onBeforeUnmount, onMounted, reactive, ref, toRefs, unref} from "vue";
    import {MittEventEnum} from "@/utils/enum/mitt-event-enum";

    let drawingSpan = ref(20)

    let filePathName = ref("")
    let filePathId = ref(0)

    // 文件目录开关控制 START
    let showFileBar = ref(true)

    function changeDrawing() {
        if (showFileBar.value == false) {
            drawingSpan.value = 24;
            console.log(drawingSpan.value)
        } else {
            drawingSpan.value = 20;
            console.log(drawingSpan.value)
        }
    }

    // 文件目录开关控制 END

    function preWork() {
        // 这里协助演示的代码，在实际项目中根据实际情况进行调整
        drawGraph();
    }

    function loadDefaultFlowImgClick() {
        graphShadow.fromJSON(defaultFlowImgDataJSON);
    }

    function getFlowJsonDataClick() {
        let jsonData = getFlowJsonData();
        ElMessageBox.confirm(jsonData + "")
            .then(() => {
            })
            .catch(() => {
                // catch error
            });
    }

    function toPNGClick() {
        toPNG();
    }

    function toSVGClick() {
        toSVG();
    }
    
    function saveFlowData() {
        const jsonData = getFlowJsonData();
        const data = {
            jsonData:jsonData,
            filePathId:filePathId.value
        }
        insertFlowJsonData(data);
    }

    function refreshFileTree(){
        console.log("-----触发刷新文件数事件-----")
        emitter.emit(MittEventEnum.REFRESH_FILE_TREE_EVENT,"");
    }

    onMounted(() => {
        console.log("重新进行加载")
        preWork();
    })

    emitter.on(MittEventEnum.CLICK_FILE_TREE_NODE_EVENT, (info)=>{
        console.log("监听到点击文件树信息")
        graphShadow.fromJSON(emptyFlowJson);
        filePathName.value = info["label"]
        filePathId.value = info["id"]
        findFlowJsonDataByFilePathId(filePathId.value).then(res=>{
            if(res["data"]){
                let json = res["data"]["jsonData"];
                graphShadow.fromJSON(JSON.parse(json));
            }
        })
    })
    onBeforeUnmount(() => {
        emitter.off(MittEventEnum.CLICK_FILE_TREE_NODE_EVENT)
    })
</script>

<style scoped>
    a {
        color: #42b983;
    }

    #graph-container {
        width: 88% !important;
        height: 100% !important;
        width: calc(100% - 180px) !important;
    }

    #zxwcontainer {
        width: 100%;
        height: 550px;
        display: flex;
        border: 1px solid #dfe3e8;
    }

    .center-h {
        text-align: center;
    }

    .head {
        margin-bottom: 10px;
    }

    #stencil {
        width: 180px;
        height: 100%;
        position: relative;
        border-right: 1px solid #dfe3e8;
    }

    .x6-widget-stencil {
        background-color: #fff;
    }

    .x6-widget-stencil-title {
        background-color: #fff;
    }

    .x6-widget-stencil-group-title {
        background-color: #fff !important;
    }

    .x6-widget-transform {
        margin: -1px 0 0 -1px;
        padding: 0px;
        border: 1px solid #239edd;
    }

    .x6-widget-transform > div {
        border: 1px solid #239edd;
    }

    .x6-widget-transform > div:hover {
        background-color: #3dafe4;
    }

    .x6-widget-transform-active-handle {
        background-color: #3dafe4;
    }

    .x6-widget-transform-resize {
        border-radius: 0;
    }

    .x6-widget-selection-inner {
        border: 1px solid #239edd;
    }

    .x6-widget-selection-box {
        opacity: 0;
    }

</style>
